<template>
  <div class="container index">
    <div class="header container">
      <div class="logo">
        <a href="/"><img src="/images/logo.png" alt="点灯前行"></a>
      </div>
      <div class="area">
        <img src="/images/location.png" alt="坐标">
        <span class="city">
          {{ city || '全国' }}
        </span>
        <span class="select" @click="areaBox = !areaBox">[切换]</span>
        <div class="area-box" v-show="areaBox">
          <div v-for="item in  provinces " class="area-item">
            <span class="num">{{ item.num }}</span>
            <div v-for="item2 in  item.children " :class="{ 'province-item': true, 'wrap': item2.name === '湖南' }"
              @click="selectProvince(item2)">
              {{ item2.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="nav">
        <div v-for="(item, index) in navList" :key="(item.name as string)" :class="['nav-box']" @click="select(index)">
          <div class="nav-box-title" :class="{ 'active': index === selectIndex }">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="search">
        <input placeholder="搜文章/找大学/查专业" type="text" @keyup.enter="toSearch">
      </div>
      <div class="user" v-if="!isLogin">
        <button @click="showModal">登录/注册</button>
      </div>
      <div class="user" v-if="isLogin" @mouseover="userMouseOver">
        <span>{{ userInfo.name }}▼</span>
      </div>
      <div class="user-info" v-if="visible3" @mouseleave="userMouseLeave">
        <div class="box-title">
          <div class="vertical-line vertical-line-black" />
          账号：<span>{{ userInfo.name }}</span>
        </div>

        <div class="box-center">
          <div class="box-item"> <img src="/svg/user.svg" />个人资料</div>
          <div class="box-item"> <img src="/svg/student.svg" />学生信息</div>
          <div class="box-item"> <img src="/svg/my.svg" /> 我的志愿表</div>
        </div>

        <div class="box-footer flex">
          <div @click="toLink('/user')">个人资料 </div>
          <div @click="quit">退出</div>
        </div>
      </div>
    </div>


    <Modal v-model:open="visible" title="" @ok="handleOk" :footer="null" :width="420" :height="480" :closable="false">
      <div class="close" @click="visible = false"><img src="/images/close.png" alt="关闭" /></div>
      <div class="modal">
        <h4>点灯前行注册和登录</h4>
        <input class="mobile" placeholder="请输入手机号码" type="text">
        <div class="flex box-code">
          <input class="code" placeholder="请输入验证码" type="text">
          <div class="code-right">发送验证码</div>
        </div>
        <button @click="login">登录/注册</button>
        <div class="flex tag">
          <div>密码登录</div>
          <div @click="visible2 = true">忘记密码</div>
        </div>
        <div class="footer">
          <Checkbox v-model:checked="checked"></Checkbox>
          <span>
            我已阅读并同意
          </span>
          <span class="protocol">《点灯前行用户协议》</span>
        </div>
      </div>
    </Modal>

    <Modal v-model:open="visible2" title="" @ok="handleOk" :footer="null">
      <div class="modal">
        <h4>找回密码</h4>
        <input class="mobile" placeholder="请输入手机号码" type="text">
        <div class="flex box-code">
          <input class="code" placeholder="请输入验证码" type="text">
          <div class="code-right">发送验证码</div>
        </div>
        <input class="mobile" placeholder="请输入密码" type="text">
        <button>登录/注册</button>
        <div class="footer">
          返回登录
        </div>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { mapState } from 'ssr-hoc-vue3'
import { computed, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Modal, Checkbox } from 'ant-design-vue';
import { provinces } from './provice'
const router = useRouter()
const route = useRoute()
const searchText = mapState().searchStore.value.searchText
const store = useStore()
const visible = ref<any>(false);
const visible2 = ref<any>(false);
const visible3 = ref<any>(false);
const checked = ref<any>(false);
const isLogin = computed(() => { return store.getters['userStore/isLogin'] })
const userInfo = computed(() => { return store.getters['userStore/userInfo'] })
const navList = ref<{ name: String, path: String }[]>([{
  name: '首页',
  path: '/'
}, {
  name: '院校库',
  path: '/university'
}, {
  name: '专业库',
  path: '/major'
}, {
  name: '大学排名',
  path: '/rank'
}, {
  name: '高考资讯',
  path: '/news'
}])
const areaBox = ref<boolean>(false);
const city = ref<string>('')
const index = navList.value.findIndex(item => item.path === '/' + route.path.split('/')[1])
if (index >= 0) {
  store.dispatch('headerStore/initialData', {
    payload: {
      active: index
    }
  })
}
else {
  store.dispatch('headerStore/initialData', {
    payload: {
      active: -1
    }
  })
}
const selectIndex = computed(() => {
  return mapState().headerStore.value.active;
})

const toSearch = () => {
  location.href = `https://search.youku.com/search_video?keyword=${searchText}`
}
const select = async (index: number) => {
  await store.dispatch('headerStore/initialData', {
    payload: {
      active: index
    }
  })
  router.push(navList.value[index].path as string)
}


const showModal = () => {
  visible.value = true;
};

const handleOk = (e: MouseEvent) => {
  visible.value = false;
};

const login = async () => {
  if (checked.value) {
    await store.dispatch('userStore/setUserInfo', { id: 1, name: 'admin' })
    visible.value = false;
  }
  else {
    alert('请勾选同意协议')
  }
}
const userMouseOver = () => {
  visible3.value = true;
}
const userMouseLeave = () => {
  visible3.value = false;
}

const quit = () => {
  store.dispatch('userStore/setUserInfo', {})
  visible3.value = false;
}

const toLink = (name: string) => {
  router.push(name)
}

const selectProvince = (item) => {
  areaBox.value = false;
  city.value = item.name;
}
</script>

<style lang="less" scoped>
@import "./index.less";

:deep(.ant-modal-footer) {
  display: none;
}

:deep(.ant-modal-header) {
  display: none;
}

:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-checkbox-checked .ant-checkbox-inner) {
  background-color: red;
  border-color: red;
}

:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner) {
  background-color: red;
  border-color: red;
}
</style>
